<template>
  <div class="flex flex-col h-full">
    <div class="h-16">
      <div class="w-[616px] h-full bg-first-title bg-size-full">
        <div class="pl-[60px] text-[40px] text-white font-[YouSheBiaoTiHei]">每日进厂物料</div>
      </div>
    </div>
    <div class="flex flex-wrap flex-1 pl-8 mt-10 bg-module2-bg bg-size-full">
      <div class="flex flex-col w-1/2 pt-16 h-1/2">
        <div class="flex items-center ml-12">
          <img :src="SecondTitle" height="16" />
          <div class="flex items-center justify-between flex-1 px-4">
            <div class="text-white text-[32px] leading-snug">原料类</div>
            <div class="mr-12 text-[#37d3db] text-[28px] leading-snug">合计: 1800t</div>
          </div>
        </div>
        <div class="flex-1" ref="chart1"></div>
      </div>
      <div class="flex flex-col w-1/2 pt-16 h-1/2">
        <div class="flex items-center ml-12">
          <img :src="SecondTitle" height="16" />
          <div class="flex items-center justify-between flex-1 px-4">
            <div class="text-white text-[32px] leading-snug">辅料类</div>
            <div class="mr-12 text-[#37d3db] text-[28px] leading-snug">合计: 1800t</div>
          </div>
        </div>
        <div class="flex-1" ref="chart2"></div>
      </div>
      <div class="flex flex-col w-1/2 h-1/2">
        <div class="flex items-center ml-12">
          <img :src="SecondTitle" height="16" />
          <div class="flex items-center justify-between flex-1 px-4">
            <div class="text-white text-[32px] leading-snug">燃料类</div>
            <div class="mr-12 text-[#37d3db] text-[28px] leading-snug">合计: 1800t</div>
          </div>
        </div>
        <div class="flex-1" ref="chart3"></div>
      </div>
      <div class="flex flex-col w-1/2 h-1/2">
        <div class="flex items-center ml-12">
          <img :src="SecondTitle" height="16" />
          <div class="flex items-center justify-between flex-1 px-4">
            <div class="text-white text-[32px] leading-snug">耐火材料</div>
            <div class="mr-12 text-[#37d3db] text-[28px] leading-snug">合计: 1800t</div>
          </div>
        </div>
        <div class="flex-1" ref="chart4"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import SecondTitle from '@/assets/images/second-title.png';
import * as echarts from 'echarts';

onMounted(() => {
  drawFigure();
});

const chart1 = ref<HTMLDivElement | null>(null);
const chart2 = ref<HTMLDivElement | null>(null);
const chart3 = ref<HTMLDivElement | null>(null);
const chart4 = ref<HTMLDivElement | null>(null);

const optionsInit = {
  title: {
    subtext: '单位: t',
    subtextStyle: {
      fontSize: 24,
      color: 'rgba(255,255,255,0.7)'
    },
    padding: [15, 0, 0, 25]
  },
  grid: {
    left: 100,
    right: 65,
    bottom: 75,
    top: 75
  },
  xAxis: {
    data: [] as string[],
    axisLabel: {
      color: 'rgba(255,255,255,0.7)',
      fontSize: 24
    }
  },
  yAxis: {
    axisLabel: {
      color: 'rgba(255,255,255,0.7)',
      fontSize: 24
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#314698'
      }
    }
  },
  series: [
    {
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        borderRadius: [8, 8, 0, 0]
      },
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#4B75EF'
        },
        {
          offset: 0.52,
          color: '#C4CDED'
        },
        {
          offset: 1,
          color: '#1D3497'
        }
      ]),
      label: {
        show: true,
        distance: 10,
        position: 'top',
        color: 'rgba(255,255,255,0.9)',
        fontSize: 24
      },
      data: [] as number[]
    }
  ]
};
const datas = [
  {
    label: ['粉矿', '精粉', '块矿', '烧结矿', '球团矿', '其它'],
    data: [1250, 900, 700, 600, 500, 200]
  },
  {
    label: ['废钢类', '生铁类', '硅锰合金', '硅铁合金', '锰铁合金', '钒氮合金'],
    data: [1250, 900, 700, 600, 500, 200]
  },
  {
    label: ['喷吹煤', '烧结用煤', '焦炭', '汽油', '柴油', '煤油'],
    data: [1250, 900, 700, 600, 500, 200]
  },
  {
    label: ['耐火泥浆', '炮泥'],
    data: [1250, 900]
  }
];
const drawFigure = () => {
  const myChart1 = echarts.init(chart1.value!);
  const myChart2 = echarts.init(chart2.value!);
  const myChart3 = echarts.init(chart3.value!);
  const myChart4 = echarts.init(chart4.value!);
  const options: (typeof optionsInit)[] = [];
  datas.forEach((item: (typeof datas)[number], index: number) => {
    options[index] = {
      ...optionsInit,
      xAxis: { ...optionsInit.xAxis, data: item.label },
      series: [{ ...optionsInit.series[0], data: item.data }]
    };
  });
  myChart1.setOption(options[0]);
  myChart2.setOption(options[1]);
  myChart3.setOption(options[2]);
  myChart4.setOption(options[3]);
};
</script>

<style lang="scss" scoped></style>
